<template>
  <div class="newDiscCode">
    <!-- <div class="goBack" @click="goBack"></div> -->
    <div class="newDiscCode-box">
      <!-- 热门新碟 -->
      <div class="newDiscCodeBottom" id="newDiscCodeBottom">
        <div class="newDiscCodeCon-title">热门新碟</div>
        <div class="newDiscCodeCon-box">
          <div
            class="newDiscCodeCon-con"
            v-for="(item, index) in DiscAlbumData"
            :key="index"
            @click="getMusicDetail(item.id)"
          >
            <div class="newDiscCode-List-img">
              <!-- <img class="auto-img" :src="item.picUrl" alt="" /> -->
              <img v-lazy="item.picUrl" :key="item.picUrl" class="auto-img" />
            </div>
            <div class="newDiscCodeCon-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 推荐 mv -->
      <div class="newDiscCodeBottomMV">
        <div class="newDiscCodeCon-title">推荐 mv</div>
        <div class="newDiscCodeCon-boxMV" style="height: 152px !important">
          <div
            class="newDiscCodeCon-conMV"
            v-for="(item, index) in RecommendMVData"
            :key="index"
            @click="getMvDetailInfo(item.id)"
          >
            <div class="newDiscCode-List-imgMV">
              <!-- <img class="auto-img" :src="item.picUrl" alt="" /> -->
              <img v-lazy="item.picUrl" :key="item.picUrl" class="auto-img" />
            </div>
            <div class="newDiscCodeCon-textMV">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 全部MV -->
      <div class="newDiscCodeBottom">
        <div class="newDiscCodeCon-title newDiscCodeCon-title-select">
          全部MV
        </div>
        <div class="newDiscCodeCon-select">
          <span
            class="newDiscCodeCon-select-option"
            v-for="(item, index) in areaData"
            :key="index"
            @click="SwitchMvAreaList(item.Text, index)"
            :class="{ selectActive: currentAreaClass == index }"
            >{{ item.Text }}</span
          >
        </div>
        <div class="newDiscCodeCon-select newDiscCodeCon-select2">
          <span
            class="newDiscCodeCon-select-option"
            v-for="(item, index) in typeData"
            :key="index"
            @click="SwitchMvTypeList(item.Text, index)"
            :class="{ selectActive: currentTypeClass == index }"
            >{{ item.Text }}</span
          >
        </div>
        <div class="newDiscCodeCon-select newDiscCodeCon-select3">
          <span
            class="newDiscCodeCon-select-option"
            v-for="(item, index) in orderData"
            :key="index"
            @click="SwitchMvOrderList(item.Text, index)"
            :class="{ selectActive: currentOrderClass == index }"
            >{{ item.Text }}</span
          >
        </div>
        <div class="newDiscCodeCon-boxMV" id="newDiscCodeCon-boxMVAllMv">
          <div
            class="newDiscCodeCon-conMV"
            v-for="(item, index) in AllMvListData"
            :key="index"
            @click="getMvDetailInfo(item.id)"
          >
            <div class="newDiscCode-List-imgMV">
              <!-- <img class="auto-img" :src="item.cover" alt="" /> -->
              <img v-lazy="item.cover" :key="item.cover" class="auto-img" />
            </div>
            <div class="newDiscCodeCon-NameMV">{{ item.artistName }}</div>
            <div class="newDiscCodeCon-textMV">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边栏 -->
    <div class="newDiscCode-con" id="newDiscCode-con">
      <div class="con-null" v-if="rankTextData.length == 0">
        <div class="con-null-title">还没有数据噢~~~</div>
      </div>
      <div class="newDiscCode-con-box" v-else>
        <div class="contain-top">
          <div class="contain-top-cn clearfix">
            <div class="contain-img fl">
              <!-- <img :src="rankTextData.coverImgUrl" class="auto-img" /> -->
              <img
                v-lazy="rankTextData.coverImgUrl"
                :key="rankTextData.coverImgUrl"
                class="auto-img"
              />
            </div>
            <div class="contain-text fl">
              <div class="text-title">{{ rankTextData.name }}</div>
              <div class="text-name">By {{ rankTextData.nickname }}</div>
              <div class="text-tear">{{ rankTextData.description }}</div>
            </div>
          </div>
          <div class="contain-play">
            <div class="play-lis">
              <el-tooltip
                class="item"
                effect="dark"
                content="播放全部"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allplay.png"
                  class="auto-img"
                  @click.stop="allPlay"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="全部加入播放列表"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allList.png"
                  class="auto-img"
                  @click.stop="JOinPlayList('all')"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="下载"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/xiazai.png"
                  class="auto-img"
                  @click.stop="downloadMusic(item, id)"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="contain-list">
          <div
            class="contain-list-con"
            v-for="(item, index) in rankData"
            :key="index"
            @click="getURL(item.id)"
          >
            <div class="contain-list-nav clearfix">
              <div class="contain-index fl">
                <span>{{ index + 1 }}</span>
              </div>
              <div class="contain-list-con-left fl">
                <!-- <img
                  class="auto-img"
                  :src="rankData.length > 0 ? item.al.picUrl : ''"
                  alt=""
                /> -->
                <img
                  v-lazy="rankData.length > 0 ? item.al.picUrl : ''"
                  :key="rankData.length > 0 ? item.al.picUrl : ''"
                  class="auto-img"
                />
              </div>
              <div class="contain-list-con-cent fl">
                <div class="cent-top-name">
                  {{ rankData.length > 0 ? item.name : "" }}
                </div>
                <div class="cent-top-text">
                  {{ rankData.length > 0 ? item.ar[0].name : "" }}
                </div>
              </div>
              <div class="contain-list-con-trackCount fr">
                <div class="con-list-item item0">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入喜欢列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/shoucang_1.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div class="con-list-item item1">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入歌单"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/jiahao.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item2"
                  @click.stop="JOinPlayList(item.id)"
                >
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入播放列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/liebiao.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item3"
                  @click.stop="downloadMusic(item.id, item.name)"
                >
                  <DownLoad ref="mychild" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="下载"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/xiazai.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="videoBox" v-if="isMvShow">
        <Video :title="videoBoxName" :poster="get_POSTER_URL" />
        <div class="videoBox_Describe">
          <div class="videoBox_Describe_artistName">{{ videoBoxName }}</div>
          <div class="videoBox_Describe_desc">{{ videoDesc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRankingListInfo,
  getMusicPlaylistInfo,
  getURLInfo,
  getMusicDetailInfo,
} from "@/Api/seachApi";

import {
  HotDiscNewAlbumInfo,
  RecommendMVInfo,
  getMvDetailListInfo,
  getMvAllInfo,
  getRecomVideoInfo,
} from "@/Api/publicMethods";
import DownLoad from "@/components/publicCompontents/DownLoad";
import Video from "@/components/video/Video";
import { Message } from "element-ui";

export default {
  name: "NewDiscCode",
  components: { DownLoad, Video },
  data() {
    return {
      // 榜单信息
      rankTextData: [],
      // 榜单歌曲展示列表
      rankData: [],
      // 歌单歌曲Id
      rankTrackIds: [],
      // 播放全部歌曲
      allplay: [],

      // ---------------------------
      // 新碟数据-最新专辑
      DiscAlbumData: [],
      // 推荐MV
      RecommendMVData: [],
      // 全部MV 栏
      AllMvListData: [],

      // 地区选择
      areaData: [
        { value: "ALL", Text: "全部" },
        { value: "ZH", Text: "内地" },
        { value: "ZH-HT", Text: "港台" },
        { value: "EA", Text: "欧美" },
        { value: "KR", Text: "韩国" },
        { value: "JP", Text: "日本" },
      ],
      typeData: [
        { value: "", Text: "全部" },
        { value: "官方版", Text: "官方版" },
        { value: "原生", Text: "原生" },
        { value: "现场版", Text: "现场版" },
        { value: "网易出品", Text: "网易出品" },
      ],
      orderData: [
        { value: "", Text: "全部" },
        { value: "最热", Text: "最热" },
        { value: "最新", Text: "最新" },
      ],
      AllMvListParams: {
        limit: 30, //取出数量 ,默认为 50

        offset: 30, //偏移数量 , 用于分页 , 如 :( 页数 -1)*50, 其中 50 为 limit 的值 , 默认 为 0

        area: "", //ALL(空值):全部,ZH:內地,ZH-HT：港台，EA:欧美,KR:韩国,JP:日本
        order: "", //排序
        type: "", //类型
      },
      videoBoxName: "", //视频的名称
      videoDesc: "", //视频的描述
      isMvShow: false, //视频插件的显示
      currentAreaClass: 0, //地区当前选中的
      currentTypeClass: 0, //类型当前选中的
      currentOrderClass: 0, //排序当前选中的
    };
  },
  computed: {
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    //视频的封面
    get_POSTER_URL() {
      console.log("get_POSTER_URL", this.$store.state.videoMvState.posterUrl);
      return this.$store.state.videoMvState.posterUrl;
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
  },
  created() {
    this.getHotDiscNewList();
    this.getRecommendMVList();
    this.getAllMvListInfo();
  },
  methods: {
    // 热门新碟上架列表-最新专辑
    getHotDiscNewList() {
      // const loading = this.$loading({
      //   background: "rgba(0,0,0,0.6)",
      //   text: "正在加载中...",
      //   spinner: "el-icon-loading",
      // });
      HotDiscNewAlbumInfo()
        .then((res) => {
          // console.log("热门新碟上架列表",res);
          if (res.code == 200) {
            this.DiscAlbumData = res.albums;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 推荐MV
    getRecommendMVList() {
      // const loading = this.$loading({
      //   background: "rgba(0,0,0,0.6)",
      //   text: "正在加载中...",
      //   spinner: "el-icon-loading",
      // });
      RecommendMVInfo()
        .then((res) => {
          // console.log("mv", res);
          if (res.code == 200) {
            this.RecommendMVData = res.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取歌单详情
    getMusicDetail(id) {
      // console.log(id);
      this.isMvShow = false; //隐藏视频播放器
      this.rankTrackIds = [];
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#newDiscCode-con", //局部加載效果
      });

      getMusicPlaylistInfo({ id: id })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            loading.close();
            this.rankTextData = res.playlist;
            res.playlist.trackIds.map((v) => {
              this.rankTrackIds.push(v.id);
            });

            setTimeout(() => {
              this.getMusic();
            }, 300);
          }
        })
        .catch((err) => {
          loading.close();
          // console.log(err);
        });
    },
    // 获取歌曲详情列表信息
    getMusic() {
      getMusicDetailInfo(this.rankTrackIds)
        .then((res) => {
          // console.log(res);

          if (res.code == 200) {
            this.rankData = res.songs;
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },

    // 获取MV详情
    async getMvDetailInfo(uid) {
      getMvDetailListInfo(uid)
        .then((res) => {
          console.log("获取MV详情", res);
          if (res.code == 200) {
            // this.poster = res.data.cover;
            this.$store.commit("videoMvState/SET_POSTER_URL", res.data.cover);
            this.videoBoxName = res.data.name + " & " + res.data.artistName;
            this.videoDesc = res.data.desc;
            // this.videoBoxDesc = res.data.desc;
            this.getMvDetail(uid);
          }
        })
        .catch((err) => {});
    },
    // 获取MV路径
    async getMvDetail(uid) {
      // console.log("获取MV路径·",uid);
      await this.$store.dispatch("videoMvState/Set_Video_Url", uid);
      this.isMvShow = true;
    },
    // 全部MV 切換
    SwitchMvAreaList(areaText, index) {
      this.AllMvListParams.area = areaText;
      this.currentAreaClass = index; // 选中tab样式
      this.getAllMvListInfo();
    },
    SwitchMvTypeList(typeText, index) {
      this.AllMvListParams.type = typeText;
      this.currentTypeClass = index; // 选中tab样式
      this.getAllMvListInfo();
    },
    SwitchMvOrderList(orderText, index) {
      this.AllMvListParams.order = orderText;
      this.currentOrderClass = index; // 选中tab样式

      this.getAllMvListInfo();
    },
    // 获取 不同的MV视频
    getAllMvListInfo() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#newDiscCodeCon-boxMVAllMv", //局部加載效果
      });
      this.AllMvListData = [];
      getMvAllInfo(this.AllMvListParams)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.AllMvListData = res.data;
          } else {
            Message.warning("暂无数据");
          }
          loading.close();
        })
        .catch((err) => {
          loading.close();
        });
    },
    // 播放全部
    allPlay() {
      this.axios({
        method: "GET",
        url: "http://musicapi.leanapp.cn/song/detail?ids=" + this.rankTrackIds,
      })
        .then((res) => {
          // console.log(res);

          if (res.data.code == 200) {
            res.data.privileges.map((v) => {
              this.allplay.push(v.id);
            });
            // console.log(this.allplay)
          }
          this.$store.commit("musicState/musicPlayList", this.allplay);
          this.getURL(res.data.songs[0].id);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 点击播放
    getURL(id) {
      // console.log(id);
      if (this.musicID === id) {
        return;
      }
      this.$store.commit("musicState/isClickPlay", false);
      getURLInfo({ id })
        .then((res) => {
          // console.log(res);
          // console.log(1)
          if (res.code == 200) {
            // this.$store.commit("musicState/audioSrc", res.data[0].url);
            this.$store.commit("musicState/SetMusicID", id);
            this.$store.commit("musicState/SetMusicPlayListData", id);
            // setTimeout(() => {
            //   this.$store.commit("musicState/isClickPlay", true);
            //   this.getAudioElement.play();
            // }, 800);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 加入播放列表
    JOinPlayList(uid) {
      // 加入播放列表
      // console.log(this.rankTrackIds)
      if (uid == "all") {
        this.$store.commit(
          "musicState/SetMusicPlayListData",
          this.rankTrackIds
        );
      } else {
        this.$store.commit("musicState/SetMusicPlayListData", uid);
      }
      // console.log(this.$store.state.musicPlayList)
    },
    // 下载音乐
    downloadMusic(uid, MusicName) {
      this.$nextTick(() => {
        // console.log("列表", this.$refs.mychild[0]);
        // debugger
        this.$refs.mychild[0].downLoad(uid, MusicName);
      });
    },
  },
  // 局部过滤器
  filters: {
    changeScore(n) {
      return parseInt(n / 100000) + "W";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
.newDiscCode {
  width: 100%;
  height: 100%;
  // margin-left: calc(50% - 950px);
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;

  .goBack {
    width: 40px;
    height: 40px;
    background-image: url("../../assets/image/icon/fanhui.png");
    background-size: 100%;
    position: absolute;
    top: 5px;
    left: 0px;
    cursor: pointer;
    &:hover {
      background-image: url("../../assets/image/icon/fanhui1.png");
      background-size: 100%;
    }
  }

  .newDiscCode-box {
    flex: 8;
    height: 100%;
    width: 100%;
    padding: 22px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
  }
  .newDiscCodeBottom {
    flex: 7;
    background-color: rgba(255, 255, 255, 0.2);
    // height: calc(100%);
    min-height: 560px;
    position: relative;
    box-sizing: border-box;
  }
  .newDiscCodeBottomMV {
    min-height: 270px;
    height: 270px;
    box-sizing: border-box;
  }
  .newDiscCodeCon-title {
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    text-indent: 2em;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
  }
  .newDiscCodeCon-title-select {
    padding: 8px 0 60px 0;
  }
  .newDiscCodeCon-select {
    position: absolute;
    top: 20px;
    left: 150px;

    .newDiscCodeCon-select-option {
      font-size: 12px;
      margin-left: 10px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.2);
      &:hover {
        color: rgba(255, 255, 255, 0.68);
      }
    }
    .selectActive {
      color: rgba(255, 255, 255, 0.68);
    }
  }
  .newDiscCodeCon-select2 {
    top: 44px !important;
  }
  .newDiscCodeCon-select3 {
    top: 66px !important;
  }
  // 专辑栏
  .newDiscCodeCon-box {
    width: 100%;
    max-height: 508px;
    padding: 0 !important;
    color: #d6d6d4;
    // background-color: #fff;
    overflow: hidden;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    // 滚动不产生滚动条兼容
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
    // 歌单
    .newDiscCodeCon-con {
      // display: inline-block;
      width: 180px;
      height: 230px;
      box-sizing: border-box;
      // flex: 1;
      // margin: 8px 26px;
      margin: 8px 0;
      margin-right: 26px;

      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      // background-color: rgba(255, 255, 255, 0.8);
      .newDiscCode-List-img {
        width: 100%;
        height: 190px;
        // background-color: rgba(255, 255, 255, 0.8);
      }
      .newDiscCodeCon-text {
        height: 26px;
        line-height: 26px;
        width: 100%;
        font-size: 18px;
        margin: 10px 0;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
      }
    }
  }
  .newDiscCodeCon-boxMV {
    width: 100%;
    height: 600px;
    padding: 0 !important;
    color: #d6d6d4;
    // background-color: #fff;
    overflow: hidden;
    overflow: scroll;
     display: flex;
    flex-wrap: wrap;
    // 滚动不产生滚动条兼容
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
    // MV
    .newDiscCodeCon-conMV {
      // display: inline-block;
      width: 180px;
      height: 180px;
      box-sizing: border-box;
      // flex: 1;
      // float: left;
      margin: 8px 0;
      margin-right: 26px;
      // margin: 8px 26px;
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      // background-color: red;
      // background-color: rgba(255, 255, 255, 0.8);

      .newDiscCode-List-imgMV {
        width: 100%;
        // height: 103px;
        height: 100%;
      }
      .newDiscCodeCon-NameMV {
        height: 26px;
        line-height: 26px;
        width: 100%;
        font-size: 18px;
        margin: 10px 0 0 0;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
      }
      .newDiscCodeCon-textMV {
        height: 26px;
        line-height: 26px;
        width: 100%;
        font-size: 18px;
        margin: 5px 0 10px 0;

        display: -webkit-box;
        -webkit-box-orient: vertical; /*设置方向*/
        -webkit-line-clamp: 2; /*设置超过为省略号的行数*/
        overflow: hidden;
      }
    }
  }

  // 右边歌曲列表
  .newDiscCode-con {
    flex: 4;
    width: 100%;
    min-width: 700px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 10px 10px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .con-null {
      width: 100%;
      height: 90px;
      line-height: 110px;
      box-sizing: border-box;
      text-align: left;
      font-size: 28px;
      padding: 0 20px;
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(0, 0, 0, 0.6);
    }
    .newDiscCode-con-box {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    .videoBox {
      width: 100%;
      height: 500px;
      padding-bottom: 80px;
      margin-top: 10px;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.2);
      position: relative;

      .videoBox_Describe {
        color: #fff;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        // <div class="videoBox_Describe_artistName">{{videoArtistName}}</div>
        //   <div class="videoBox_Describe_desc">{{videoDesc}}</div>

        &_artistName {
          font-size: 22px;
          margin: 5px 0 5px 10px;
        }
        &_desc {
          text-indent: 2em;
          text-align: justify;
        }
      }
    }
  }
  .contain-top {
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.1);

    .contain-top-cn {
      width: 100%;
      padding-left: 10px;
      box-sizing: border-box;

      .contain-img {
        width: 120px;
        height: 120px;
        margin-top: 5px;
        overflow: hidden;
        border-radius: 10px;
      }
      .contain-text {
        margin-left: 10px;
        text-align: left;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.7);

        .text-title {
          font-weight: bold;
          font-size: 24px;
        }
        .text-name {
          font-size: 16px;
          font-weight: bold;
        }
        .text-tear {
          margin-top: 12px;
          height: 50px;
          width: 380px;
          font-size: 18px;
          // background-color: red;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

          &:hover {
            height: 76px;
            overflow: visible;
            white-space: inherit;
          }
        }
      }
    }
    .contain-play {
      width: 100%;
      margin-top: 10px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.2);

      .play-lis {
        width: 120px;
        height: 100%;
        float: right;

        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
          margin-top: 12px;
          display: inline-block;
          vertical-align: bottom;
        }
      }
    }
  }

  .contain-list {
    width: 100%;
    // height: 680px;
    height: calc(100% - 180px);
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }

    .contain-list-con {
      width: 100%;
      height: 130px;
      padding: 20px;
      box-sizing: border-box;

      background-color: rgba(255, 255, 255, 0.1);

      .contain-list-nav {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-bottom: 1px solid #fff;
        position: relative;
        cursor: pointer;
      }

      &:hover {
        .contain-list-nav {
          border: none;
          background-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.6);
        }
        .contain-index {
          color: rgba(255, 255, 255, 0);
        }
        .contain-list-con-left {
          transition: all 0.3s;
          transform: translateX(-70px);
        }

        .cent-top-name {
          transition: all 0.3s;
          transform: translateX(-80px);
        }
        .cent-top-text {
          transition: all 0.3s;
          transform: translateX(-80px);
        }
        .item0 {
          transition: all 0.4s;
          transform: translateY(0px);
        }
        .item1 {
          transition: all 0.5s;
          transform: translateY(0px);
        }
        .item2 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
        .item3 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
      }
    }
    .contain-index {
      width: 60px;
      height: 100%;
      font-size: 80px;
      font-weight: 900;
      margin-right: 10px;
      color: rgba(255, 255, 255, 0.6);
      position: relative;
      // background-color: rgba(0, 0, 0, 0.1);

      span {
        position: absolute;
        bottom: -26px;
        left: calc(50% - 26px);
      }
    }
    .contain-list-con-left {
      width: 90px;
      height: 90px;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s;
      transform: translateX(0px);
      background-color: rgba(0, 0, 0, 0.3);
    }
    .contain-list-con-cent {
      margin-left: 26px;
      display: flex;
      flex-flow: column;
      text-align: left;

      .cent-top-name {
        width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s;
        transform: translateX(0px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .cent-top-text {
        width: 100px;
        max-width: 200px;
        min-width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        transition: all 0.3s;
        transform: translateX(218px);
        text-align: right;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .contain-list-con-trackCount {
      height: 100%;
      line-height: 130px;
      float: right;
      margin-right: 10px;

      .con-list-item {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
        transition: all 0.3s;
        transform: translateY(50px);
        cursor: pointer;
        z-index: 100;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .newDiscCodeCon-con,
  .newDiscCodeCon-conMV {
    &:nth-child(4n + 1) {
      margin-left: 26px !important;
    }
  }
}
@media screen and (min-width: 1201px) and (max-width: 1520px) {
  .newDiscCodeCon-con,
  .newDiscCodeCon-conMV {
    &:nth-child(5n + 1) {
      margin-left: 26px !important;
    }
  }
}
@media screen and (min-width: 1521px) {
  .newDiscCodeCon-con,
  .newDiscCodeCon-conMV {
    &:nth-child(8n + 1) {
      margin-left: 26px !important;
    }
  }
}
</style>
